<template>
  <div class="write-secret-info">
    <group class="none-bottom-border">
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="3">
            项目名称
          </flexbox-item>
          <flexbox-item class="value leave-minute" :span="9">
            <input style="margin-top:1px;" type="text" max="5" v-model="projectName" placeholder="请输入项目名称">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="3">
            备注
          </flexbox-item>
          <flexbox-item class="value" :span="9">
            <x-textarea class="apply-reason" v-model="remarks" :placeholder="'请输入备注'"></x-textarea>
          </flexbox-item>
        </flexbox>
      </cell-box>

      <cell-box class="cellbox-item" v-if="changeApplyType === '修改申请原因'">
        <flexbox>
          <flexbox-item class="title" :span="4">
            修改申请原因<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value" :span="8">
            <x-textarea class="apply-reason" :max="200" v-model="editApplyReason" :placeholder="'请输入修改申请原因'"></x-textarea>
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item" v-if="changeApplyType === '重新申请原因'">
        <flexbox>
          <flexbox-item class="title" :span="4">
            重新申请原因<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value" :span="8">
            <x-textarea class="apply-reason" :max="200" v-model="reApplyReason" :placeholder="'请输入重新申请原因'"></x-textarea>
          </flexbox-item>
        </flexbox>
      </cell-box>
    </group>
  </div>
</template>

<script>
  import { Group, CellBox, Flexbox, FlexboxItem, XTextarea, Datetime } from 'vux';
  export default {
    name: 'AskLeaveInfo',
    data () {
      return {
        changeApplyType:'',
        editApplyReason:'',
        reApplyReason:'',
        projectName:'',
        remarks:''
      };
    },
    components: {
      Group,
      CellBox,
      Flexbox,
      FlexboxItem,
      XTextarea,
      Datetime
    },
    mounted () {
    },
    methods: {
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  .write-secret-info{
    .none-bottom-border{
      .annex-inner{
        display:flex;
        justify-content: space-between;
        align-items: center;
        .annex-inner-title{
          width:90%;
        }
        .annex-inner-img{
          width:10%;
          text-align: right;
        }
      }
    }  
  }
  .cellbox-item{
    padding: 0 15px;
    &:before{
      border-color: #e6e6e6;
    }
    .title{
      color: #666;
      font-size: getRem(28);
      padding: getRem(32) 0;
    }
    .value{
      font-size: getRem(28);
    }
    .date-pciker{
      padding: getRem(32) 0;
      a{
        display: inline;
        padding: 0;
        color: #ddd;
        &:before{
          content: none;
        }
      }
      .has-value{
        color: #333;
      }
      .separation-symbol{
        color: #666;
      }
    }
    .leave-minute{
      input{
        display: block;
        width: calc(100% - 15px);
        border: 0; 
        padding: getRem(32) 0;
        line-height: getRem(38);
        font-size: getRem(28);
        &::placeholder{
          color: #ddd;
        }
      }
    }
    .apply-reason{
      padding: getRem(32) 0;
    }
    .leave-type{
      padding: getRem(32) 0;
      label{
        display: block;
        line-height: getRem(42);
        padding: 0 getRem(10) getRem(10) getRem(50);
        position: relative;
      }
      .other-type{
        display: inline-block;
        width: calc(100% - #{getRem(120)});
        border: 0;
        font-size: getRem(28);
        line-height: getRem(50);
        border-radius: 0;
        padding: 0 getRem(10);
        border-bottom: .5px solid #ddd;
        &:disabled{
          background: #fff;
        }
      }
      .apply-radio{
        position: absolute;
        left: 0;
        top: getRem(3);
        display: inline-block;
        appearance: none;
        -webkit-appearance: none;
        width: getRem(36);
        height: getRem(36);
        background: url(../../assets/images/radio-default.png) no-repeat center center;
        background-size: getRem(36) getRem(36);
        &:checked{
          background-image: url(../../assets/images/radio-selected.png);
        }
      }
    }
    .select-images-list{
      margin-top: getRem(20);
    }
  }
  input:focus{
    outline: none!important;
  }
  .vux-flexbox{
    align-items: flex-start;
  }
</style>